<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    div {
        /*width: 300px;*/
        height: 300px;
        background-color: pink;

        padding: 50px;

        /* 内减模式 */
        /*box-sizing: border-box;*/
    }
</style>



<body>

    <!--
        在不指定盒子宽高（三种情况任意一种①宽不指定；②高不指定；③宽高都不指定）的情况下，padding不会影响盒子大小。
    
        问题 padding会撑大盒子
        分析 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸
        解决 方式一 比如盒子是200px，内边距是20。可以用200-40px设置为盒子的大小
            方式二 可以使用内减模式 设置属性 box-sizing:broder-box
    -->
    <div>盒子模型</div>
</body>

</html>